<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图表分析</title>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/echarts.min.js"></script>
<style type="text/css">
	.tubiao{
		box-shadow: 0 0 30px rgba(0,0,0,0.14);
		margin: 50px auto;
		font-family: "黑体";
		padding:20px ;
	}
	.tubiaof{
		text-align: center;
		font-size: 30px;
		line-height: 50px;
		height: 50px;
		margin: 30px 0;
	}
</style>
</head>
<body style="background: #F2F2F2;">
	<div class="tubiaof">企业初查情况统计</div>
    <tr>
        {{$diqu}}事故隐患分析
        <td>序号</td>
            <td>检查项目</td>
            <td>消防安全隐患数量</td>
            <td>生产安全隐患数量</td>
            <td>合计</td>
            <td>备注</td>
    </tr>
    <?php $i=1;?>
    @foreach($dataarr as $da)
        <br>
        <tr>
            <td>{{$i}}</td>
            <td>{{$da['product']}}</td>
            <td>{{$da['消防安全隐患']}}</td>
            <td>{{$da['生产安全隐患']}}</td>
            <td>{{$da['消防安全隐患'] + $da['生产安全隐患'] }}</td>
            <td></td>
        </tr>
     <?php $i+=1;?>
    @endforeach
    <div class="tubiao" id="barchart4" style="width: 1200px;height:400px;"></div>
    <div class="tubiao" id="barchart1" style="width: 1200px;height:400px;"></div>
    <div class="tubiao" id="barchart2" style="width: 1200px;height:400px;"></div>
    <div class="tubiao" id="barchart3" style="width: 1200px;height:400px;"></div>
    <script type="text/javascript">
        var myChart4 = echarts.init(document.getElementById('barchart4'));
        var myChart1 = echarts.init(document.getElementById('barchart1'));
        var myChart2 = echarts.init(document.getElementById('barchart2'));
        var myChart3 = echarts.init(document.getElementById('barchart3'));
        var option4 = {
            title : {
                text: '{!! $diqu !!}事故隐患统计图',
                x:'left'
            },
            legend: {},
            tooltip: {},
            dataset: {
                dimensions:['product', '消防安全隐患', '生产安全隐患'],
                source: {!! $data !!}
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
            ]
        };
        var option1 = {
            title : {
                text: '隐患整改情况统计图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已整改','部分整改','待整改']
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:{!! $zhenggai !!},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option2 = {
            title : {
                text: '消防安全隐患整改情况图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已整改','部分整改','待整改']
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:{!! $zhenggaixf !!},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option3 = {
            title : {
                text: '生产安全隐患整改情况图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已整改','部分整改','待整改']
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:{!! $zhenggaisc !!},
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }
            ],
        };
        myChart4.setOption(option4);
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    </script>

</body>
</html>